<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<!--<![endif]-->

<head>
<title>任务调度 学习</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- 360浏览器默认采用高速模式渲染页面 -->
<meta name="renderer" content="webkit">

<meta name="keywords" content="Demo">
<meta name="description" content="Demo">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" th:href="@{/img/favicon.ico}">
<!-- Global CSS  -->
<link rel="stylesheet" href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/layui.css}">

<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/modules/sys/job.js}"></script>

<!-- Custom JS -->
<script type="text/javascript">
 
</script>
</head>
<!--[if !IE]>注释规范_Begin<![endif]-->
<!--[if !IE]>注释规范_End<![endif]-->
<body>
    <h1>layui文档地址 </h1>
    <button onclick="showTips()">layui提示</button>
    <button class="btn" onclick="query()">ajax异步获取服务端数据</button>
    <div id="hujun">
        <a class="btn" th:href="@{/hujun/demo/1,2}">HuJun</a>
    </div>

    <input id="jobId" name="jobId" value="job1" />
    <button onclick="pauseJob()">暂停定时任务</button>


</body>
<script type="text/javascript" th:inline="javascript">
    function showTips() {
        //layui模块的使用
        layui.use(['layer', 'form'], function(){
            const layer = layui.layer
            layer.msg('Hello World');
        });
    }
    function query() {
        $.ajax({
            // 规定请求的类型（GET 或 POST）。
            type: 'post',
            // 规定发送请求的 URL。默认是当前页面。
            url: 'http://localhost:8081/musicbar/goods-api/queryGoods',
            // 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
            contentType: 'application/x-www-form-urlencoded',
            // 规定要发送到服务器的数据。
            data: {
                mobile: '15200000000',
                goodsId: 1,
                goodsName: '1号商品'
            },
            xhrFields: {
                withCredentials: true // 发送Ajax时，Request header中会带上 Cookie 信息。
            },
            // 发送请求前运行的函数。
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Authorization", 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImYxZWU4MjU0LTljMGQtNDc5Ny05MWIzLWY5YWFkOGZhMmVkZCJ9.h3R8RThinMXXWEiaAUrHKshjarHP4-BOXksUfSmfLcCH3jtFqKoRhR5MT4oTLBYZbCRd0Axlt-p9FfBojn6BSw');
            },
            success: function(res) {
                console.log('接口请求成功', res, res.data.list)
                let ele = `
                    <div id="content">
                        <ul class="bg" id="${res.data.list[0].name}">
                            [[${data}]]
                            <li th:each="item : ${res.data.list}">{{item.name}}</li>
                        </ul>
                    </div>
                `;
                const element = document.createElement('div')
                element.innerHTML = ele
                const div = document.getElementById('hujun')
                div.appendChild(element)
            },
            error: function(res) {
                console.log(res)
            },
            // 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
            complete: function(xhr,status){
                console.log('执行请求完成时运行的函数')
            }
        })
    }
</script>